<script setup lang="ts">
import Editor from "@/components/edit/editor.vue";
import AppUtil from "@/utils/AppUtil";
import { reactive, getCurrentInstance } from "vue";
defineOptions({
  name: "xy"
});
const { proxy } = getCurrentInstance();
const state = reactive({
  activeName: 1,
  xyArr: {
    1: {
      title: "隐私协议",
      id: 1,
      content: ""
    },
    2: {
      title: "用户协议",
      id: 2,
      content: ""
    }
  },
  reqing: false
});
req_data(1);
function req_data(id) {
  // console.log("tab_click", id);
  if (!state.xyArr[id].content) {
    AppUtil.request(
      {
        url: "/api/v1/agreements/one",
        params: { type: id }
      },
      res => {
        console.log("articleContent", res);
        state.xyArr[id].content = res.data.content;
        state.xyArr[id].type = res.data.type;
        state.xyArr[id].sid = res.data.sid;
      }
    );
  }
  // console.log("xyArr[id].content", state.xyArr[id].content);
}
function submit_click() {
  // console.log("submit_click", activeName.value);
  state.reqing = true;
  let item = state.xyArr[state.activeName];
  AppUtil.request(
    {
      url: "/api/v1/agreements/" + item.sid,
      method: "put",
      data: {
        type: item.type,
        content: item.content
      }
    },
    res => {
      console.log("updateArticleContent", res);
      proxy.$message({
        message: "更新成功",
        type: "success"
      });
    },
    b => {
      state.reqing = false;
    }
  );
}
</script>

<template>
  <div class="main">
    <div style="max-width: 1024px">
      <el-tabs
        v-model="state.activeName"
        type="border-card"
        @tab-change="req_data"
      >
        <el-tab-pane
          v-for="(item, index) in state.xyArr"
          :key="index"
          :label="item.title"
          :name="item.id"
        >
          <Editor v-model="item.content" />
          <div class="cls-end">
            <el-button
              type="primary"
              size="large"
              :loading="state.reqing"
              @click="submit_click"
              >更新协议</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
